﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Drag and set</title>
    <script type="text/javascript" src="Scripts/jq.js"></script>
    <script type="text/javascript">
    function drag(e)
    {
       //alert(typeof(document.getElementById('dragboy')))
       if(document.getElementById('dragboy')&&document.getElementById('dragboy').nodeName=='DIV')//判读是否可拖动元素，譬如table则不行
       {
           //alert('drag');
       }
       $('#dragboy').beginDrag(e)     
    }
    
    function disDrag(e)
    {
       //alert(typeof(document.getElementById('dragboy')))
       if(document.getElementById('dragboy')&&document.getElementById('dragboy').nodeName=='DIV')//判读是否可拖动元素，譬如table则不行
       {
           //alert('drag');
       }
       
       $('#dragboy').releaseDrag(e);  
    }
    
    jQuery.fn.extend({
       moving:false,
       border:'1px #b5b5b5 solid',
       beginDrag:function(e){//拖动处理
         // alert(this.html());
          var oraX=parseInt(this.css('left'));
          var oraY=parseInt(this.css('top'));
       
          var devX=e.pageX?e.pageX-oraX:e.x-oraX;
          var devY=e.pageY?e.pageY-oraY:e.y-oraY;
          var base=this;
          this.moving=true;
          $('body').mousemove(
         function(e){
             base.css("opacity", 0.30).css('left',e.pageX-devX).css('top',e.pageY-devY).css('border','4px #fff solid');  
          });
         
       },
       releaseDrag:function(e){
         $('body').unbind('mousemove');
         $(jQuery.target(e)).css('border',this.border);
         $(jQuery.target(e)).css('opacity',100);//$()将dom对象转化成jquery对象         
       },
       endDrag:function(fun){//移动完成，要触发的事件
         fun.call(window,fun,null);//执行回调函数
       },
       restore:function(){//还原到原来位置
         
       },
       dropandinsert:function(){//拖动并插入
         if(this.moving)
         {
             //显示当前位置的相邻元素 虚线边框;
             
         }
       }
    })
    jQuery.extend({
      target:function(e)
      {
         if(document.all)
         {
            return e.srcElement;
         }else{
            return e.target;
         }
      }
    })
  
    //$('#dragboy').mousedown(function(e){$('#dragboy').beginDrag(e);});
    </script>
</head>
<body>
<div onmouseup="disDrag(event)" onmousedown="drag(event)"  style="background-color:Green; width:200px; height:200px; border:2px #b5b5b5 solid; text-align:center; vertical-align:middle; position:absolute; left:200px; top:80px; cursor:pointer" id="dragboy">
drag me
</div>
<div style="width:800px; height:800px; border:4px #000 solid">
<div>
 <ul style="list-style:none; margin-left:0">
 <li onclick="">show drag box</li>
 </ul>
</div>
<div style="width:380px; height:600px; border:1px #b5b5b5 solid; float:left">
<div style=" width:100%; height:60px; background-color:#e3e3e3; border:1px solid #e3e3e3"></div>
<div style=" width:100%; height:60px; background-color:#e3e3e3; border:1px solid #e3e3e3"></div>
<div style=" width:100%; height:60px; background-color:#e3e3e3; border:1px solid #e3e3e3"></div>
<div style=" width:100%; height:60px; background-color:#e3e3e3; border:1px solid #e3e3e3"></div>
<div style=" width:100%; height:60px; background-color:#e3e3e3; border:1px solid #e3e3e3"></div>
<div style=" width:100%; height:60px; background-color:#e3e3e3; border:1px solid #e3e3e3"></div>
<div style=" width:100%; height:60px; background-color:#e3e3e3; border:1px solid #e3e3e3"></div>
<div style=" width:100%; height:60px; background-color:#e3e3e3; border:1px solid #e3e3e3"></div>
<div style=" width:100%; height:60px; background-color:#e3e3e3; border:1px solid #e3e3e3"></div>
</div>
<div style="width:380px; height:600px; border:1px #b5b5b5 solid; float:right"></div>
<div style=" clear:both"></div>
</div>
</body>
</html>
